import { FC, useEffect, useState } from 'react';
import { useNavigate } from 'react-router';
import ReactEcharts from 'echarts-for-react';
import { CountsParams } from '../services/counts/type'
import { getQuestionsCounts, getRepairsCounts } from '../services/counts/index'
import { Flex, Radio } from 'antd';
const Index: FC<any> = (props: any): JSX.Element => {

 
    
    const [option, setoption] = useState<any>({
        title: {
            text: '数据展示'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['保修总数', '投诉总数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: []
    })


    const [countParams, setCountParams] = useState<CountsParams>({ days: 30 });

    const getCountsData = async () => {

        let series: any = [];
        const res: any = await getQuestionsCounts(countParams);
        const reRes: any = await getRepairsCounts(countParams);
        series.push(
            {
                name: '投诉总数',
                type: 'line',
                stack: 'Total',
                data: res.data.map((item: any) => item.counts)
            }
        )
        series.push(
            {
                name: '保修总数',
                type: 'line',
                stack: 'Total',
                data: reRes.data.map((item: any) => item.counts)
            }
        )
        setoption({ ...option, series, xAxis: { ...option.xAxis, data: res.data.map((item: any) => item.label) } })


    }

    useEffect(() => {
        getCountsData();

    }, [countParams])

    const timeChange = (e: any) => {

        
        switch (e.target.value) {
            case "30":
                setCountParams({ days: 30 })
                break;
            case "6":
                setCountParams({ months: 6 })
                break;
            case "1":
                setCountParams({ years: new Date().getFullYear() })
                break;
            default:
                break;
        }

    }



    useEffect(() => {
    }, [])

    return (
        <div>echaert
            <Radio.Group onChange={timeChange} defaultValue="30" buttonStyle="solid">
                <Radio.Button value="30" >最近30天</Radio.Button>
                <Radio.Button value="6">最近半年</Radio.Button>
                <Radio.Button value="1">本年</Radio.Button>
            </Radio.Group>
            <ReactEcharts option={option} />
        </div>
    )
}
export default Index;